import React from 'react';
import style from './style.module.css'
import { Cascader,Input, Space } from 'antd';

const { Search } = Input;


const ShopSearch = (props) => {


    const levelChange = (value) => {  //级联选择
        console.log(`selected ${value}`);
        const {selectStatus} = props;
        selectStatus(value)
    }
    const onSearch = (value) =>{ //模糊搜索
        console.log(value)
        const {handleSearch} = props;
        handleSearch(value.trim())
    };
    
    const {SearchForm } = props
    // console.log(SearchForm)
    return (
        <div className={style.shopSearch}>
        {/* 级联选择 */}
            {SearchForm.LevelStatus && (
                <div style={{fontSize:'14px',marginRight:'15px'}}>
                <span >{SearchForm.LevelStatus.title}</span>
                <Cascader 
                options={SearchForm.LevelStatus.data} 
                onChange={levelChange} 
                size="small"
                placeholder="请选择" />
                </div>
              )}
              
              {/* 模糊搜索 */}
            {SearchForm.search && (
                <>
                <span style={{fontSize:'14px'}}>{SearchForm.search.title}</span>
                <Space direction="vertical">
                    <Search size="small"
                    placeholder={SearchForm.search.placeholder}
                    onSearch={onSearch} style={{ width: 200 }} />
                </Space>
                </>
              )}

        </div>
    );
}

export default ShopSearch;
